<template>
	<view class="content flex-column bg-sub">
		<view class="flex-grow scroll-y">
			<!-- 顶部 -->
			<view class="top-bar linear-bg" hover-class="none" hover-stop-propagation="false">
				<view class="" :style="{ height: systemInfo.statusBarHeight + 'px' }">
				</view>
				<view class="logo flex align-center" hover-class="none" hover-stop-propagation="false">
					<view class="logo-bg radius-circle flex align-center justify-center" hover-class="none"
						hover-stop-propagation="false">
						<image class="logo-img radius-circle" src="/static/logo.png" mode="scaleToFill"></image>
					</view>
					<view class="ml-md text-inverse text-xxl font-bold" hover-class="none"
						hover-stop-propagation="false">
						{{ appConfig.appName }}
					</view>

				</view>
				<view class="swiper-bg">
					<swiper @change="(e) => { dotIndex = e.detail.current > 0 ? e.detail.current : 0 }"
						class="swiper-content" :indicator-dots="false" :autoplay="true" :interval="3000"
						:duration="1000">
						<swiper-item @tap="tapBanner(item)" class="swiper-item" v-for="(item, index) in banners"
							:key="index">
							<image class="banner-img" :src="item.strPhoto" mode="scaleToFill"></image>
						</swiper-item>

					</swiper>

				</view>
			</view>
			<!--  -->
			<view class=" dots flex justify-center align-center">
				<view class="" v-for="(item, index) in banners" :key="index">
					<view
						:class="{ 'dot-item text-inverse radius-circle': true, 'dot-item-active': dotIndex == index }">
					</view>
				</view>
			</view>
			<!-- 选项卡 -->
			<view class="tabs flex align-center justify-between flex-wrap mt-lg">
				<view class="tab-item p-lg bg-white shadow-base radius-lg flex-column mt-lg"
					v-for="(item, index) in tabs" :key="index">
					<view
						class="tab-icon-bg bg-theme-lightest flex-column align-center justify-center radius-circle mb-base">
						<view :class="item.icon">

						</view>
					</view>
					<view class="">
						{{ item.title }}
					</view>
				</view>
			</view>
			<!-- 活动 -->
			<view @tap="toActive"
				class="active mx-xl p-lg linear-bg text-inverse flex justify-between align-center my-xxl radius-lg">
				<view class="">
					<view class="mb-sm text-lg font-bold">
						精彩活动
					</view>
					<view class="">
						传统中医文化传承
					</view>
				</view>
				<u-icon name="arrow-right" color="#fff" size="20"></u-icon>
			</view>
		</view>
		<CustomTabbarVue></CustomTabbarVue>
	</view>
</template>

<script>
	import CustomTabbarVue from '@/components/CustomTabbar.vue';
	import {
		getBanner
	} from '@/api/modules/business';
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			CustomTabbarVue
		},
		computed: {
			...mapGetters({
				loading: 'app/loading',
				systemInfo: 'system/systemInfo',
				appConfig: 'app/appConfig'
			})
		},
		data() {
			return {
				banners: [],
				tabs: [{
						title: '了解皭庐朱氏',
						url: '',
						icon: 'cus-icon cus-icon-info text-theme text-xxl'
					},
					{
						title: '病例调查',
						url: '',
						icon: 'cus-icon cus-icon-search text-theme text-xxl'
					},
					{
						title: '非遗传承技艺',
						url: '',
						icon: 'cus-icon cus-icon-skills text-theme text-xxl'
					},
					{
						title: '我的登记',
						url: '',
						icon: 'cus-icon cus-icon-schedule text-theme text-xxl'
					},
					{
						title: '联系我们',
						url: '',
						icon: 'cus-icon cus-icon-service text-theme text-xxl'
					}
				],
				dotIndex: 0
			}
		},
		onLoad() {
			this.init();
		},
		onPullDownRefresh() {
			if (this.loading) {
				uni.stopPullDownRefresh()
			} else {
				this.init()
			}

		},
		methods: {
			init() {
				this.getBanner()
			},
			getBanner() {
				getBanner().then(res => {
					console.log(res);
					if (res.Code == 200) {
						this.banners = res.Data || [{
							strPhoto: 'static/home/banner.png'
						}];
					}
				})
			},
			tapBanner(e) {
				console.error(e)
			},
			toActive() {
				uni.navigateTo({
					url: '/pages/home/modules/active/list'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bar {
		width: 100%;
		// background: linear-gradient(to right, $theme-color-light, $theme-color-dark);
		border-radius: 0 0 $uni-border-radius-xl*1.6 $uni-border-radius-xl*1.6;

		.logo {
			padding: 0 $uni-spacing-row-xl;

			.logo-bg {

				border: $uni-spacing-row-sm solid $uni-text-color-inverse;

			}

			.logo-img {
				width: $uni-img-size-lg;
				height: $uni-img-size-lg;

			}
		}

		.swiper-bg {

			padding: 0 $uni-spacing-row-xl;
			margin-top: $uni-spacing-col-xl;

			.swiper-content {
				width: calc(100vw - $uni-spacing-row-xl*2);
				height: calc((100vw - $uni-spacing-row-xl*2)/16*9);
			}

			.swiper-item,
			.banner-img {
				width: calc(100vw - $uni-spacing-row-xl*2);
				height: calc((100vw - $uni-spacing-row-xl*2)/16*9);
				border-radius: $uni-border-radius-xl;
			}
		}


	}

	/* dots */
	.dots {
		margin-top: $uni-spacing-col-base;
		width: 100vw;
	}

	.dot-item {
		width: $uni-font-size-sm*0.5;
		height: $uni-font-size-sm*0.5;
		transition: .5s;
		background: $uni-text-color-grey;
		margin-right: $uni-spacing-row-sm;
	}

	.dot-item:first-child {
		margin-left: $uni-spacing-row-sm;
	}

	.dot-item-active {
		width: $uni-font-size-sm*1.2;
		height: $uni-font-size-sm*0.5;
		border-radius: $uni-border-radius-md;
		background: linear-gradient(to right, $theme-color-light, $theme-color-dark);
	}

	/*tabs*/
	.tabs {
		padding: 0 $uni-spacing-row-xl;

		.tab-item {
			width: calc(50% - $uni-spacing-row-base);
			// padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		}

		.tab-icon-bg {
			width: $uni-font-size-xxl*2;
			height: $uni-font-size-xxl*2;
		}
	}

	/*active*/
</style>